<template>
  <!-- <div class="indicator-root-wrapper"> -->
  <svg
    :viewBox="
      commonStore.isWideEnough ? graphic.viewBox : graphic.viewBoxCompact
    "
    class="indicator-root-wrapper"
  >
    <g id="models">
      <polygon
        v-for="area in graphic.polygons"
        :key="area.id"
        :points="area.points"
        :class="[
          'indicator-model-default',
          // indicatorSettings.unhoveredOpcity == 0.8
          //   ? 'indicator-model-opacity-80'
          //   : indicatorSettings.unhoveredOpcity == 0.6
          //   ? 'indicator-model-opacity-60'
          //   : indicatorSettings.unhoveredOpcity == 0.5
          //   ? 'indicator-model-opacity-50'
          //   : '',
          selectedModelCode == area.id
            ? 'indicator-model-default-selected'
            : '',
        ]"
        @click="notify(area.id)"
        @mouseenter="selectedModelCode = area.id"
        @mouseleave="selectedModelCode = -1"
        :style="{
          fill: matchColor(area.id),
          stroke: indicatorSettings.showBorder ? foreColor : 'none',
        }"
      />
    </g>
    <g id="model-tags">
      <g
        v-for="tag in labels"
        :class="[
          'text-group',
          // 'indicator-model-tags-default',
          tag.sectorCodes.includes(selectedModelCode)
            ? 'model-tags-selected'
            : '',
        ]"
        :transform="'translate(' + tag.x + ' ' + tag.y + ')'"
        @click="notify(tag.id)"
      >
        <text class="text text-big" transform="translate(-119 -45)">
          {{ tag.seatName }}
        </text>
        <text class="text text-medium" :transform="`translate(-119 0)`">
          {{ tag.frequency }}
        </text>
        <text class="text text-small" :transform="`translate(-119 35)`">
          {{ tag.sectorCodes.join(" ") }}
        </text>
      </g>
    </g>
    <g id="pre-alert">
      <text
        class="text-group text-big blinking-slight"
        transform="translate(120 80)"
        v-if="valueTarget != 'current'"
      >
        *预设扇区布局
      </text>
    </g>
  </svg>
  <!-- </div> -->
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import graphicData from "./graphicData.json";
import useCommonStore from "@/store/common.js";
import useSeatStore from "@/store/seat.js";
import getLabels from "./getLabels.js";

const commonStore = useCommonStore();
const seatStore = useSeatStore();
const mousePosition = ref([0, 0]);
const selectedModelCode = ref(null);
const reportTimer = ref(null);

const seatStatus = computed(() => seatStore.seatStatus);
const valueTarget = computed(() => seatStore.valueTarget);
const indicatorSettings = computed(() => seatStore.indicatorSettings);
const darkMode = computed(() => commonStore.darkMode);
const foreColor = computed(() => (darkMode.value ? "#FFF" : "#000"));
const graphic = computed(() => graphicData);
const detailInfo = computed(() => {
  if (selectedModelCode.value == null) return null;
  let status = matchSeatStatus(selectedModelCode.value);
  if (status) {
    return status.frequency;
  }
  return null;
});
const labels = computed(() => getLabels());

const adjustTextColor = (backgroundColor) => {
  let r = parseInt(backgroundColor.substring(1, 3), 16);
  let g = parseInt(backgroundColor.substring(3, 5), 16);
  let b = parseInt(backgroundColor.substring(5, 7), 16);
  let brightness = (r * 299 + g * 587 + b * 114) / 1000;
  return brightness > 125 ? "#000000" : "#ffffff";
};

const emits = defineEmits(["graphicRatioChanged"]);
const reportGraphicRatio = () => {
  let viewBox = graphic.value.viewBox.split(" ");
  let ratio = parseInt(viewBox[2]) / parseInt(viewBox[3]);
  // console.log("graphicRatioChanged", "ratio", ratio);
  emits("graphicRatioChanged", ratio);
};

const matchSeatStatus = (id) => {
  for (let i = 0; i < seatStatus.value.length; i++) {
    if (
      valueTarget.value == "planning" &&
      seatStatus.value[i].planningSectorCodes != null
    ) {
      if (seatStatus.value[i].planningSectorCodes.indexOf(id) > -1) {
        return seatStatus.value[i];
      }
    } else {
      if (seatStatus.value[i].sectorCodes.indexOf(id) > -1) {
        return seatStatus.value[i];
      }
    }
  }
  return null;
};

const matchFrequency = (id) => {
  let status = matchSeatStatus(id);
  if (status) {
    if (valueTarget.value == "planning" && status.planningFrequency != null) {
      return status.planningFrequency;
    } else if (status.frequency != null) {
      return status.frequency;
    }
  }
  return "频率未设置";
};

const matchColor = (id) => {
  let status = matchSeatStatus(id);
  if (status) {
    return darkMode.value ? status.defaultColor : status.color;
  }
  return "#AAA";
};

const mouseLeave = () => {
  // @mouseleave = "mouseLeave"
  selectedModelCode.value = null;
};

const mouseMove = (e, area) => {
  // @mousemove = "(e)=>{mouseMove(e,model)}"
  mousePosition.value = [e.offsetX + 24, e.offsetY + 48];
  selectedModelCode.value == null || selectedModelCode.value != area.id
    ? (selectedModelCode.value = area.id)
    : null;
};

onMounted(() => {
  reportTimer.value = setInterval(() => {
    reportGraphicRatio();
  }, 200);
});
onUnmounted(() => {
  clearInterval(reportTimer.value);
});
</script>

<style scoped>
@import "../styles/blinking.css";

svg,
text,
polygon {
  transition: all 0.5s ease-in-out;
}

.indicator-root-wrapper {
  width: 100%;
  height: 100%;
  flex-shrink: 1;
  /* padding: 12px 24px; */
  padding: 0;
  margin: 0;
  /* border:1px solid black; */
}

.indicator-model-default {
  fill: #666;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.5s ease-in-out;
  box-shadow: none;
}

.indicator-model-opacity-80 {
  opacity: 0.8;
}

.indicator-model-opacity-60 {
  opacity: 0.6;
}

.indicator-model-opacity-50 {
  opacity: 0.5;
}

.indicator-model-default-selected {
  stroke-width: 3;
  opacity: 1;
  box-shadow: 0 0 500px rgba(0, 0, 0, 0.5);
}

.indicator-model-tags-default {
  user-select: none;
  font-size: 14px;
  fill: #000;
  font-family: Consolas;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  opacity: 1;
}

.indicator-model-tags-hide {
  opacity: 0;
}

.model-tags-selected {
  text-shadow: 0 0 100px var(--el-bg-color-overlay),
    0 0 50px var(--el-bg-color-overlay), 0 0 10px var(--el-bg-color-overlay),
    0 0 3px var(--el-bg-color-overlay);
}

.text-group {
  fill: var(--el-text-color-primary);
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  text-shadow: 0 0 10px var(--el-bg-color-overlay),
    0 0 3px var(--el-bg-color-overlay);
}

.text-group:hover {
  text-shadow: 0 0 100px var(--el-bg-color-overlay),
    0 0 50px var(--el-bg-color-overlay), 0 0 10px var(--el-bg-color-overlay),
    0 0 3px var(--el-bg-color-overlay);
}

.text {
  text-anchor: start;
  text-align: left;
  font-weight: 900;
  font-family: Consolas, "Courier New", Courier, monospace;
  transition: all 0.5s ease-in-out;
}

.text-big {
  font-size: 60px;
}
.text-medium {
  font-size: 45px;
}
.text-small {
  font-size: 30px;
}
</style>
